<template>
  <div class="registration-management pd-20">
    <el-input placeholder="请输入账号"
              v-model="form.submitAccount"
              class="w-200"
              clearable
              @clear="handleQuery"></el-input>

    <el-select placeholder="请选择状态"
               @change="handleQuery"
               clearable
               @clear="handleQuery"
               v-model="form.auditStatus">
      <el-option v-for="item in statusList"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id"></el-option>
    </el-select>
    <el-button type="primary"
               @click="handleQuery">查 询
    </el-button>

    <element-table class="mt-20"
                   ref='multipleTable'
                   v-loading="loading"
                   :columns="columns"
                   :data="tableData"
                   pager
                   :pageTotal="pageTotal"
                   :pageIndex="pageIndex"
                   :pageSize="pageSize"
                   @handleChangePage="handleChangePage">
      <template v-slot:imageUrl="{row}">
        <el-image :src="row.imageUrl"
                  class="setImg"
                  :preview-src-list="[row.imageUrl]">
        </el-image>
      </template>
      <template v-slot:option="{row}">
        <!-- 审核状态（-1 审核不通过 0 待审核 1 审核通过） -->
        <el-button type="primary"
                   v-if="row.auditStatus === -1 || row.auditStatus === 1"
                   @click="handleOption('detail', row)">详 情
        </el-button>
        <el-button type="primary"
                   v-if="row.auditStatus === 0"
                   @click="handleOption('review', row)">审 核
        </el-button>
      </template>
    </element-table>
    <!-- 查看审核结果 -->
    <el-dialog title="审核结果"
               :visible.sync="dialogVisible"
               width="30%"
               @close="dialogVisible = false">
      <el-card class="card-box">
        <p>审核结果：
          <span v-if="dataObj.auditStatus === -1">审核不通过</span>
          <span v-if="dataObj.auditStatus === 0">待审核</span>
          <span v-if="dataObj.auditStatus === 1">审核通过</span>
        </p>
        <p v-if="currRow.auditStatus !== 1">原因：{{ dataObj.reason }}</p>
        <p>审核账号：{{ dataObj.auditAccount }}</p>
        <p>审核时间：{{ commonFunction.timestampFormat(new Date(dataObj.auditTime), 'yyyy-MM-dd hh:mm:ss') }}</p>
      </el-card>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="dialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 审核 -->
    <el-dialog title="审 核"
               :visible.sync="dialogReviewVisible"
               width="40%"
               @close="closeReview">
      <el-card class="card-box">
        <el-form :model="reviewData"
                 :rules="reviewRules"
                 ref="reviewRef">
          <el-form-item label="审核结果:">
            <el-radio-group v-model="reviewData.auditStatus">
              <el-radio :label="1">审核通过</el-radio>
              <el-radio :label="-1">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="单位名称:">
            <el-input v-model="currRow.name"
                      class="w-200"
                      :disabled="true"
                      placeholder="请输入单位名称">
              <!-- <el-button slot="append"
                         icon="el-icon-search"
                         @click="handleSearch"></el-button> -->
            </el-input>
            <ul class="card-list mt-20"
                v-if="cardList.length > 0">
              <li v-for="item in cardList"
                  :key="item.id">
                <div>
                  <h3>{{ item.name }}</h3>
                  <p>
                    <i class="el-icon-location-outline"></i>{{ item.address }}
                  </p>
                </div>
              </li>
            </ul>
          </el-form-item>
          <el-form-item label="所属公司:">
            <el-select v-model="reviewData.companyId"
                       ref="selectDom"
                       placeholder="请选择所属公司"
                       filterable
                       remote
                       reserve-keyword
                       :remote-method="searchMethod"
                       :loading="loading1"
                       class="w-200"
                       clearable
                       @change="handleSelect">
              <el-option v-for="item in companyFilterList"
                         :key="item.id"
                         :label="item.name"
                         :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="不通过原因:"
                        prop="reason"
                        v-if="reviewData.auditStatus === -1">
            <el-input type="textarea"
                      v-model="reviewData.reason"></el-input>
          </el-form-item>
        </el-form>
      </el-card>
      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogReviewVisible = false">取 消</el-button>
        <el-button type="primary"
                   @click="submitForm">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import elementTable from '@/base/ElementTable'

export default {
  name: 'registrationManagement', // 注册单位管理
  data() {
    return {
      loading: false,
      loading1: false,
      dialogVisible: false,
      dialogReviewVisible: false,
      form: {
        submitAccount: '',
        auditStatus: ''
      },
      statusList: [
        {id: -1, name: '审核不通过'},
        {id: 0, name: '待审核'},
        {id: 1, name: '审核通过'}
      ],
      columns: [
        {
          label: '提交时间',
          prop: 'createTime',
          width: 150,
          align: 'center',
          formatter: (row, cellValue) => {
            return this.commonFunction.timestampFormat(new Date(row.createTime), 'yyyy-MM-dd hh:mm:ss')
          }
        },
        {
          label: '提交账号',
          prop: 'submitAccount',
          align: 'center'
        },
        {
          label: '单位名称',
          prop: 'name',
          align: 'center'
        },
        {
          label: '单位类别',
          prop: 'levelName',
          align: 'center'
        },
        {
          label: '单位性质',
          prop: 'property',
          align: 'center',
          formatter: (row, cellValue) => {
            if (row.property === 1) return '综合医院 '
            if (row.property === 2) return '专科医院 '
          }
        },
        {
          label: 'logo',
          prop: 'imageUrl',
          align: 'center',
          isSlot: true,
        },
        {
          label: '行政区域',
          prop: 'area',
          align: 'center',
          width: 300,
        },
        {
          label: '详细地址',
          prop: 'address',
          showToolTip: true,
          align: 'center',
          width: 200
        },
        {
          label: '审核状态',
          prop: 'auditStatus',
          align: 'center',
          formatter: (row, cellValue) => {
            // 审核状态（-1 审核不通过 0 待审核 1 审核通过）
            if (row.auditStatus === -1) return <el-tag type="danger"> 审核不通过</el-tag>
            if (row.auditStatus === 0) return <el-tag type="warning">待审核</el-tag>
            if (row.auditStatus === 1) return <el-tag type="success">审核通过</el-tag>
          },
        },
        {
          label: '操作',
          prop: 'option',
          align: 'center',
          isSlot: true
        }
      ],
      tableData: [],
      pageTotal: 0,
      pageIndex: 1,
      pageSize: 10,
      dataObj: {},
      currRow: {},
      reviewData: {
        auditStatus: -1,
        reason: '',
        companyId: ''
      },
      reviewRules: {
        reason: [
          {required: true, message: '请填写不通过原因', trigger: 'blur'}
        ]
      },
      cardList: [], // 单位名称列表
      companyList: [],
      companyFilterList: [],
    }
  },
  methods: {
     handleQuery() {
      this.pageIndex = 1
      this.getList()
    },
    async getList() {
      this.loading = true
      const {data: res} = await this.post(this.api.regist.getHospitalRegisterApplyPage, {
        pageIndex: this.pageIndex - 1,
        pageSize: this.pageSize,
        ...this.form
      })
      if (res.code === '200') {
        this.loading = false
        this.tableData = res.object;
        this.pageTotal = res.totalNum;
      }
    },
    // 分页
    handleChangePage(page) {
      this.pageIndex = page;
      this.getList();
    },
    // 操作
    async handleOption(op, row) {
      this.currRow = row;
      switch (op) {
        case 'detail':
          this.dialogVisible = true;
          const {data: res} = await this.post(this.api.regist.getHospitalRegisterApplyDetail, {
            id: row.id
          })
          if (res.code === '200') {
            this.dataObj = res.object;
          }
          break;
        case 'review':
          this.dialogReviewVisible = true;
          this.handleSearch();
          break;
      }
    },
    // 远程搜索参与公司
    searchMethod(query) {
      if (query !== '') {
        this.loading1 = true;
        let _this = this;
        this.post(this.api.company.companyList, {
          pageIndex: this.pageIndex - 1,
          pageSize: this.pageSize,
          name: query,
          hospitalType: '',
          status: 1
        }).then(res => {
          if (res.data.code === '200') {
            this.loading1 = false;
            _this.companyList = res.data.object;
          }
        })
        setTimeout(() => {
          this.loading1 = false;
          this.companyFilterList = this.companyList.filter(item => item.name.indexOf(query) > -1);
        }, 200)
      } else {
        this.companyFilterList = [];
      }
    },
    handleSelect(item) {
      this.reviewData.companyId = item;
    },
    // 审核
    submitForm() {
      this.$refs.reviewRef.validate(async (valid) => {
        if (valid) {
          const {data: res} = await this.post(this.api.regist.auditHospitalRegisterApply, {
            id: this.currRow.id,
            area: this.currRow.area,
            ...this.reviewData
          })
          if (res.code === '200') {
            this.$message.success('审核成功!');
            this.dialogReviewVisible = false;
            this.getList();
          }
        }
      })
    },
    // 查询单位名称
    async handleSearch() {
      const {data: res} = await this.post(this.api.regist.searchHospitalByES, {
        name: this.currRow.name
      })
      if (res.code === '200') {
        this.cardList = res.object;
      }
    },
    closeReview() {
      this.dialogReviewVisible = false;
      this.cardList = [];
    }
  },
  created() {
    this.getList();
  },
  components: {
    'element-table': elementTable
  }
}
</script>
<style lang="scss" scoped>
.setImg {
  border-radius: 50%;
  width: 80px;
  height: 80px;
}

.card-box {
  p {
    line-height: 30px;
    font-size: 15px;
  }
}

.card-list {
  width: 100%;
  padding: 0 20px;
  border-radius: 5px;
  border: 1px solid #f4f5f7;
  height: 400px;
  overflow-y: scroll;

  li {
    margin-top: 15px;
    border-bottom: 1px solid #f4f5f7;

    h3 {
      font-size: 16px;
      color: #464c66;
      font-weight: bold;
    }

    p {
      i {
        display: inline-block;
        vertical-align: middle;
        padding-right: 8px;
        font-size: 20px;
        color: #14af9c;
      }

      font-size: 14px;
    }
  }
}
</style>
